<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>




<div >
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">公司简介</a>
                </li>
                <li class="disabled">
                    <a href="#">酒店信息</a>
                </li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">菜单<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">操作</a>
                        </li>
                        <li>
                            <a href="#">设置栏目</a>
                        </li>
                        <li>
                            <a href="#">更多设置</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--            <body background="hotel.jpg">-->

<div style="position: relative; ">

                <img src="hotel.jpg" width="600" height="600" alt="">


                <span style="position: absolute; top: 5px; left: 10px;">
                <h1 >
                    路尚酒店
                </h1>

                <h3>
                   We On Wey
                </h3>
                <span style="display: inline" >

                    <a class="btn btn-primary btn-large" href="#">招商加盟</a>
                    <a class="btn btn-primary btn-large" href="#" >在线BBKing</a>
                 </span>

                    </span>
            </div>




  <div id="app" class="container">
            <h3>
                公告系统(Bootstrap+Vue.js+Axios)
            </h3>
            <div v-show="listNoticeDiv"><!--内容列表区-->
                <form id="queryForm" style="display: inline">
                    <input type="text" name="title" id="titleId" placeholder="请输入标题">
                    <input type="button" class="btn btn-primary btn-sm" @click="doQueryNotices" value="查询" >
                    <button class="btn btn-primary btn-sm" @click="doShowOrHide">添加</button>
                </form>



                <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="(n,i) in notices" :key="i">
                    <td >{{i+1}}</td>
                    <td >{{n.title}}</td>
                    <td >{{n.type}}</td>
                    <td >{{n.status}}</td>
                    <td >{{n.createdTime}}</td>
                    <td>
                    <button @click="doDeleteById(n.id)">delete</button>
                    <button @click="doFindById(n.id)">update</button>
                    </td>
                </tr>
                </tbody>

            </table>

            <div class="pagination">
                <button class="pre" @click="doJumpToPage" >上一页</button>
                <button class="percent">{{pageCurrent}}/{{pageCount}}</button>
                <button class="next" @click="doJumpToPage">下一页</button>
                <form style="display: inline" id="pageForm">
                    <input type="text" name="pageCurrent" id="pageNumId">
                    <input type="button" value="跳转" class="jump" @click="doJumpToPage">

                </form>
            </div>
            </div>
            </div>


<!--           内容编辑区-->

<div v-show="editNoticeDiv" style="display: none">
    <form id="noticeEditForm">
        <input type="hidden" id="id" v-model="id">
        <div class="form-group">
            <label for="typeId" >类型:</label>
            <select class="form-group" v-model="type" id="typeId">
                <option value="1">通知</option>
                <option value="2">公告</option>
            </select>
        </div>
        <div class="form-group">
            <label for="tId">标题:</label>
            <input type="text" v-model="title" class="form-control" id="tId" placeholder="请输入标题...">
        </div>
        <div class="form-group">
            <label for="contentId">内容:</label>
            <textarea class="form-control" v-model="content" rows="3" id="contentId" placeholder="请输入内容..."></textarea>
        </div>

        <div class="form-group">
            <label>状态:</label>
            <label class="radio-button">
                <input type="radio" v-model="status" name="status" value="0" checked> 启用
            </label>
            <label class="radio-inline">
                <input type="radio" v-model="status" name="status" value="1"> 禁用
            </label>
        </div>
        <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">保存</button>
        <button type="button" class="btn btn-default cancel" @click="doCancel">取消</button>
    </form>
</div>



<!--            <h3>-->
<!--                h3. 这是一套可视化布局系统.-->
<!--            </h3>-->
<!--            <table class="table">-->
<!--                <thead>-->
<!--                <tr>-->
<!--                    <th>序号</th>-->
<!--                    <th>标题</th>-->
<!--                    <th>类型</th>-->
<!--                    <th>状态</th>-->
<!--                    <th>创建时间</th>-->
<!--                    <th>操作</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody>-->

<!--                </tbody>-->
<!--            </table> -->
<!--            <button type="button" class="btn btn-default">按钮</button>-->
<!--            -->

        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>

    var vm=new Vue({
        el:"#app",
        data:{
            notices:[],
            id:"",
            title:"",
            content:"",
            type:1,
            status:1,
            pageCurrent:1,
            pageCount:0,
            listNoticeDiv:true,
            editNoticeDiv:false

        },
        methods:{

            doShowOrHide(){
                this.listNoticeDiv=false;
                this.editNoticeDiv=true;
            },
            doCancel(){
                this.listNoticeDiv=true,
                    this.editNoticeDiv=false
            },


            doFindById(id){
                let url=`http://localhost/notice/${id}`;
                axios.get(url).then((response)=>{
                    let result=response.data;//jsonResult
                    if(result.state==1){
                        //修改vue对象中data (model)中的属性的值
                        this.id=result.data.id;
                        this.title=result.data.title;
                        this.content=result.data.content;
                        this.type=result.data.type;
                        this.status=result.data.status;
                        this.doShowOrHide();
                    }else{
                        alert(result.message);
                    }
                })
            },

            doSaveOrUpdate() {
                //1.定义url
                let url="http://localhost/notice/"
                let params={"id":this.id,
                    "title":this.title,
                    "content":this.content,
                    "type":this.type,
                    "status":this.status}
                axios({
                    method: this.id?"put":"post",
                    url: url,
                    data: params
                }).then((response)=>{
                    let result=response.data;
                    if(result.state==1){
                        alert("save ok");
                        this.doGetNotices();
                        this.resetForm();
                      this.doCancel();
                    }else{
                        alert(result.message);
                    }
                })
            },

            resetForm(){
                this.id="",
                    this.title="",
                    this.content="",
                    this.type=1,
                    this.status=0
            },



            doDeleteById(id){
                let url=`http://localhost/notice/${id}`;
                 axios.delete(url).then((response)=>{
                     let result=response.data;
                     if (result.state==1){
                         alert(result.message);
                         let rows=document.querySelectorAll("table>tbody>tr").length;

                         if (this.pageCurrent>1&&this.pageCurrent==this.pageCount&&rows==1){
                             this.pageCurrent--;
                         }
                         this.doGetNotices();
                     }else{
                         alert(result.message);
                     }
                 })
            },


            doJumpToPage(event) {
              let cls=event.target.getAttribute("class");

              if(cls=="pre"&&this.pageCurrent>1) {
                  this.pageCurrent--;

              }else if (cls=="next"&&this.pageCurrent<this.pageCount){
                      this.pageCurrent++

                  }else if (cls=="jump"){
                  let input=document.querySelector("#pageNumId");
                  let pageNum=input.value;
                  if (pageNum<1||pageNum>this.pageCount){
                      alert("页码值不正确");
                      return;
                  }
                  this.pageCurrent=pageNum;
              }else {
                  return;
              }
                this.doGetNotices();
            },


            doQueryNotices(){
                //设置当前页码值
                this.pageCurrent=1;
                //执行查询操作
                this.doGetNotices();
            },

            doGetNotices(){
                let title=document.querySelector("#titleId").value;
         let url=`http://localhost/notice/`;
         axios.get(url,{
             params:{
                 pageCurrent:this.pageCurrent,
                 title:title
             }
         })
                .then((response)=> {
                    let jsonResult=response.data;
                    console.log(jsonResult);
                    this.notices=jsonResult.data.list
                    //设置分页初始数据
                    this.pageCurrent=jsonResult.data.pageNum;
                    this.pageCount=jsonResult.data.pages;

                })
            }
        },
        mounted(){
            this.doGetNotices();
        }
    })


</script>


</body>

</html>